<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <!--   <FormItem label="企业名称：">
                 <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                              :orgTree="true" :root-org-id="companyId"></cascaderDom>
             </FormItem>-->
        </Col>
        <Col span="8">
          <!-- <FormItem label="活动日期：">
               &lt;!&ndash;  <DatePicker type="year" v-model="form1.yearDate" style="width: 100%"></DatePicker>&ndash;&gt;
               <DatePicker type="daterange" split-panels v-model="date" style="width: 100%"></DatePicker>
           </FormItem>-->
        </Col>
        <Col span="8" :offset="16">
          <!--                    <Button @click="reset" class="ivu-btn-reset">重置</Button>-->
          <Button class="ivu-btn-query" icon="md-refresh" @click="query()">刷新</Button>
        </Col>
      </Row>
    </Form>
    <Row style="margin-right:10px; margin-top: 5px;">
      <Col span="24">
        <Card dis-hover>
          <div ref="envinfoContainer" style="height: 300px;"></div>
        </Card>
      </Col>
    </Row>
    <Table ref='table' :height='this.Common.tableHeightNum' :loading="loading" size="small" class="no-add-table"
           no-data-text="没有查询到相关数据!"
           highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
    </Table>
    <!--  <Row style="margin-right:10px;">
          <Col span="24">
              <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                    style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                    show-total show-sizer show-elevator/>
          </Col>
      </Row>-->

  </Layout>
</template>

<script>
import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';
import cascaderDom from '../../../components/cascader-dom.vue';
import echarts from 'echarts';

export default {
  components: {cascaderDom},
  name: "riskStatical",
  data() {
    return {
      date: ['', ''],
      loading: false,
      tableHeight: '',
      form1: {
        orgId: '',
        year: '',
        yearDate: ''
      },
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      companyId: sessionStorage('userId').getObject('userId').companyId,
      dataTable: [],
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          minWidth: 200,
          title: '单位名称',
          align: 'center',
          fixed: 'left',
          key: 'orgName',
        },
        {
          minWidth: 100,
          title: '从业人数',
          align: 'center',
          key: 'staffNumber',
        },
        {
          minWidth: 100,
          title: '重点排污单位数量',
          align: 'center',
          key: 'isPullateCount',
        },
        {
          minWidth: 150,
          title: '安全标准化等级数量',
          align: 'center',
          children: [
            {
              title: '一级',
              key: 'safeRankOne',
              align: 'center',
              minWidth: 100
            }, {
              title: '二级',
              key: 'safeRankTwo',
              align: 'center',
              minWidth: 100
            }, {
              title: '三级',
              key: 'safeRankThree',
              align: 'center',
              minWidth: 100
            }
          ]
        },
        {
          minWidth: 150,
          title: '安全文化示范企业数量',
          align: 'center',
          children: [
            {
              title: '国家级',
              key: 'safeLevelOne',
              align: 'center',
              minWidth: 100
            }, {
              title: '省级（直辖市）',
              key: 'safeLevelTwo',
              align: 'center',
              minWidth: 100
            }, {
              title: '地市级',
              key: 'safeLevelThree',
              align: 'center',
              minWidth: 100
            }
          ]
        },
        {
          minWidth: 100,
          title: '职业健康体系认证数量',
          align: 'center',
          key: 'healthDateCount',
        },
        {
          minWidth: 100,
          title: '环境管理体系认证数量',
          align: 'center',
          key: 'manageDateCount',
        },
        /*{
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 140,
            align: 'center',
            render: (h, params) => {
                return h('div', [
                    h('A', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            fontSize: '12px',
                        },
                        on: {
                            click: () => {
                                this.InputData = params.row;
                                this.model2 = true;
                            }
                        }
                    }, '详情'),
                    h('A', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            fontSize: '12px',
                            marginLeft: '8px'
                        },
                        on: {
                            click: () => {
                                this.InputData = params.row;
                                this.model1 = true;
                            }
                        }
                    }, '修改'),
                    h('A', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        style: {
                            fontSize: '12px',
                            color: 'red',
                            marginLeft: '8px'
                        },
                        on: {
                            click: () => {
                                this.deleteData(params.row);
                            }
                        }
                    }, '删除')
                ]);
            }
        }*/
      ],
      model1: false,
      model2: false,
      buttonDisabled: false,
      InputData: {},
      statistical: {}
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query()
  },
  methods: {
    setOrgId(data) {
      this.form1.orgId = data[data.length - 1];
    },
    setOrgName(data) {
      this.form1.orgName = data;
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    query() {
      this.loading = true;
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
      };
      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      let url = Api.companStatistics;
      this.$http.get(url, {params: data}).then((res) => {
        console.log(res.data);
        this.dataTable = res.data.data;
        // this.pagedata.total = res.data.totalSize;
        this.chartStatistical()
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {
        orgId: '',
        year: '',
        yearDate: ''
      }
      this.date = ['', ''];
      this.$refs.childOrg.resetCurrentOrg();
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    chartStatistical() {
      this.statistical = {
        companyName: [],
        staffNumber: [],
        isPullateCount: [],
        safeRankOne: [],
        safeRankTwo: [],
        safeRankThree: [],
        safeLevelOne: [],
        safeLevelTwo: [],
		safeLevelThree: [],
        healthDateCount: [],
        manageDateCount: []
      }
      for (var i = 0; i < this.dataTable.length; i++) {
        let item = this.dataTable[i]
        this.statistical.companyName.push(item.orgName)
        this.statistical.staffNumber.push(item.staffNumber)
        this.statistical.isPullateCount.push(item.isPullateCount)
        this.statistical.safeRankOne.push(item.safeRankOne)
        this.statistical.safeRankTwo.push(item.safeRankTwo)
        this.statistical.safeRankThree.push(item.safeRankThree)
        this.statistical.safeLevelOne.push(item.safeLevelOne)
        this.statistical.safeLevelTwo.push(item.safeLevelTwo)
		this.statistical.safeLevelThree.push(item.safeLevelThree)
        this.statistical.healthDateCount.push(item.healthDateCount)
        this.statistical.manageDateCount.push(item.manageDateCount)
      }
      let container = echarts.init(this.$refs.envinfoContainer);
      let option = this.getOption();
      container.setOption(option);
      window.onresize = container.resize;
    },
    getOption() {
      let option = {
        tooltip: {	//提示框组件
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {	//图例组件
          data: ['从业人数', '重点排污单位', '安全标准化等级(一级)',
            '安全标准化等级(二级)', '安全标准化等级(三级)',
            '安全文化示范企业(国家级)', '安全文化示范企业(省市级)',
            '职业健康体系认证', '环境管理体系认证']
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true,
        },
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider',
          textStyle: false
        }],
        xAxis: [
          {
            type: 'category',
            data: this.statistical.companyName,
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var str = "";
                var num = 6; //每行显示字数
                var valLength = value.length; //该项x轴字数
                var rowNum = Math.ceil(valLength / num); // 行数
                if (rowNum > 1) {
                  for (var i = 0; i < rowNum; i++) {
                    var temp = "";
                    var start = i * num;
                    var end = start + num;
                    temp = value.substring(start, end) + "\n";
                    str += temp;
                  }
                  return str;
                } else {
                  return value;
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '从业人数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.staffNumber
          },
          {
            name: '重点排污单位',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.isPullateCount
          },
          {
            name: '安全标准化等级(一级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankOne
          },
          {
            name: '安全标准化等级(二级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankTwo
          },
          {
            name: '安全标准化等级(三级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankThree
          },
          {
            name: '安全文化示范企业(国家级)',
            type: 'bar',
            stack: '安全文化示范企业',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeLevelOne
          },
          {
            name: '安全文化示范企业(省级（直辖市）)',
            type: 'bar',
            stack: '安全文化示范企业',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeLevelTwo
          },
		  {
		    name: '安全文化示范企业(地市级)',
		    type: 'bar',
		    stack: '安全文化示范企业',
		    emphasis: {
		      focus: 'series'
		    },
		    data: this.statistical.safeLevelThree
		  },
          {
            name: '职业健康体系认证',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.healthDateCount
          },
          {
            name: '环境管理体系认证',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.manageDateCount
          }
        ]
      };
      return option;
    }
  }
}
</script>

<style scoped>
@import '../../../index.css';
</style>
